<template>
  <div
    class="image-view"
    @onClick="onClick"
  >
    <!-- 正常加赞完成的图片 -->
    <img
      :class="round?'round image':'image'"
      :style="{ height }"
      :src="src"
      :mode="mode"
      :lazyLoad="lazyLoad"
      @error="onError"
      @load="onLoad"
      v-show="!isLoading && !error"
    >
    <!-- 加载出错，加载未完成的备用图片 -->
    <img
      :class="round?'round image':'image'"
      :style="{ height }"
      src="/static/image/loding.jpeg"
      :mode="mode"
      :lazyLoad="lazyLoad"
      v-show="isLoading || error"
    >
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      default: ''
    },
    mode: {
      type: String,
      default: 'widthFix'
    },
    lazyLoad: {
      type: Boolean,
      default: true
    },
    round: {
      type: Boolean,
      default: false
    },
    height: {
      type: String,
      default: 'auto'
    }
  },
  watch: {
    src (newValue, preValue) {
      // 当src发生变化时，此函数被执行
      // 消除，图片变动引起的位置变动
      if (newValue && newValue.length > 0 && newValue !== preValue) {
        this.$nextTick(() => {
          this.isLoading = true
          this.error = false
        })
      }
    }
  },
  data () {
    return {
      // 图片是否正在加载，是否加载失败
      // 当图片加载失败，使用占位图片替代
      isLoading: true,
      error: false
    }
  },
  methods: {
    onClick () {
      console.log('imageView onclick')
      this.$emit('onClick')
    },
    // 图片加载失败事件
    onError () {
      this.error = true
      this.isLoading = false
      console.log('imageBiew组件onError()', this.error, this.isLoading)
    },
    // 图片加载成功事件
    onLoad () {
      this.isLoading = false
      this.error = false
    }
  }
}
</script>
<style lang="scss" scoped>
.image-view {
  width: 100%;
  margin: 0;
  .image {
    width: 100%;
    margin: 0;
    &.round {
      // 50%是为了做圆形的头像
      border-radius: 50%;
    }
  }
}
</style>